<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery.min.js"></script>
		<script src="js/layui/layui.js" charset="utf-8"></script>
		<link 	<link rel="stylesheet" href="./base.css" /> 
		<style>
		html body{
			background-color: #F4F4F4;
		}
			.main{
				margin: 0 auto;
				width: 900px;
				height: 250px;
				background-color:#FFFFFF ;
				line-height: 250px;
				
				
			}
			.content{
				height: 100px;
				border: 1px solid black;
				display: flex;
				overflow-x: scroll;
				
			}
			.content>div{
				width: 200px;
				height: 100%;
				margin-left: 20px;
				background-color: red;
				flex-shrink: 0;
			}
		</style>
	</head>
	<body>
			<div class="main">
				<div class="content" id="content">
					<div class="c1" id="c1"></div>
					<div class="c2" id="c2"></div>
					<div class="c3" id="c3"></div>
					<div class="c4" id="c4"></div>
					<div class="c5" id="c5"></div>
					<div class="c6" id="c6"></div>
					<div class="c7" id="c7"></div>
				</div>
			</div>
			
			
			<script type="text/javascript">
				$(function(){
					let i=0;		
						function xh(){
								if(i<999){
									setTimeout(function(){
										
											console.log($(".content")[0].scrollLeft)
											$(".content")[0].scrollLeft=$(".content")[0].scrollLeft+20
											console.log($(".c1")[0].scrollWidth)
											i+=1;
											xh()
									},1000)
								}
							
						}
						xh();
					
					
					
					
					
				})
				
			
					
				
			</script>
	</body>
</html>
